<template>
	<div class="main">
		<!-- banner -->
		<swiper :options="swiperOption" ref="mySwiper">
			<!-- 轮播项 -->
			<swiper-slide>
				<img src="./../../assets/images/banner.png" width="100%">
			</swiper-slide>
			<swiper-slide>
				<img src="./../../assets/images/banner2.png" width="100%">
			</swiper-slide>
			<swiper-slide>
				<img src="./../../assets/images/banner3.png" width="100%">
			</swiper-slide>
			<!-- 这是轮播的小圆点 -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
		<!-- 分类 -->
<!-- 		<ul class="sort bgwhite">
			<li @click="toSingle()">
				<img src="./../../assets/images/index1.png">
				<p>体质数据</p>
			</li>
			<li @click="toEye()">
				<img src="../../assets/images/index2.png">
				<p>视力数据</p>
			</li>
		</ul> -->
		<!-- 公告 -->
		<div class="notice" style="margin-top: 0;">
			<div class="wrap">
				<div class="left flex flex-h">
					<img src="./../../assets/images/icon.png">
					<span>公告</span>
				</div>
				<div class="right m-text-nowrap" @click="toDetail()">欢迎来到学壮壮！</div>
			</div>
		</div>
		<!-- 院校人数 -->
		<div class="statisMax">
			<div class="statis">
				<li>
					<h3 style="color:#2CB262">{{schoolCount.toLocaleString()}}</h3>
					<p>院校机构</p>
				</li>
				<li>
					<h3 style="color:#FF6B37">{{studentCount.toLocaleString()}}</h3>
					<p>体测人数</p>
				</li>
			</div>
		</div>
		<!-- 临时 -->
		<ul class="temp">
			<li @click="toSingle()">
				<div class="left">
					<img src="./../../assets/images/index1.png">
					<h3>体质数据</h3>
				</div>
				<i class="fa fa-angle-right right"></i>
			</li>
			<li @click="toEye()" style="margin-top: 15px;">
				<div class="left">
					<img src="./../../assets/images/index2.png">
					<h3>视力数据</h3>
				</div>
				<i class="fa fa-angle-right right"></i>
			</li>
		</ul>
		<!-- footer -->
		<ul class="footer">
			<li class="active">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li @click="toMy()">
				<i class="fa fa-user-o"></i>
				<p>我的</p>
			</li>
		</ul>
	</div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
	components:{
		swiper,
		swiperSlide
	},
	data () {
		return {
			//轮播
			swiperOption:{
				//圆点
				pagination: {
					el: '.swiper-pagination',
				},
				autoplay:{
					delay:5000
				}
			},
			//院校人数
			schoolCount:0,
			studentCount:0
		}
	},
	methods:{
		toSingle:function(){
			this.$router.push({path:"/single"});
		},
		//跳到我的
		toMy:function(){
			this.$router.push({path:"/my"});
		},
		//跳到视力
		toEye:function(){
			this.$router.push({path:"/eye"});
		},
		//公共详情
		toDetail:function(){
			this.$router.push({path:"/note"});
		},
		//查询openId
		DetailOpenId:function(){
			let openId = this.common.getCookie('openId')?this.common.getCookie('openId'):this.$route.query.id;
			this.$axios.post('/token/' + openId)
			.then(res=>{
				//如果已经绑定
				if(res.data.data != 0){
					this.saveCookie(res);
				}
				else{
					this.delCookie();
				}
			})
		},
		//保存cookie
		saveCookie:function(res){
			this.common.setCookie('token',res.data.data.token); //token
			this.common.setCookie('name',res.data.data.studentName); //姓名
			this.common.setCookie('edu',res.data.data.studentCode); //学籍号
			this.common.setCookie('studentUid',res.data.data.studentUid); //学生id
			this.common.setCookie('year',res.data.data.annual); //2018秋
			this.common.setCookie('planId',res.data.data.collectionUid); //采集计划id
			this.common.setCookie('phone',res.data.data.phone); //手机号
		},
		//删除cookie
		delCookie:function(){
			this.common.delCookie('token'); //token
			this.common.delCookie('name'); //姓名
			this.common.delCookie('edu'); //学籍号
			this.common.delCookie('studentUid'); //学生id
			this.common.delCookie('year'); //2018秋
			this.common.delCookie('planId'); //采集计划id
			this.common.delCookie('phone'); //手机号
		},
		//院校人数
		statis:function(){
			this.$axios.get('/physical/getCountNum')
			.then(res=>{
				this.schoolCount = res.data.data.schoolAllCount;
				this.studentCount = res.data.data.studentAllCount;
			})
		}
	},
	created:function(){
		document.title = "首页";
	},
	mounted:function(){
		//查询openId
		this.DetailOpenId();
		//院校人数
		this.statis();
	}
}
</script>

<style lang="scss" scoped>
	//临时
	.temp{
		padding: 15px 10px;
		li{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px;
			background-color: #fff;
			border-radius: 6px;
			box-shadow:0 0 5px #ccc;
			.left{
				display:flex;
				align-items:center;
				img{
					height: 40px;
				}
				h3{
					margin-left: 10px;
					color: #000;
				}
			}
			.right{
				font-size: 25px;
			}
		}
	}
	//体测人数
	.statisMax{
		padding: 15px 10px 0 10px;
		.statis{
			display: flex;
			background-color: #fff;
			border-radius: 4px;
			padding: 20px 0;
			li{
				width:50%;
				text-align: center;
				h3{
					letter-spacing:0.5px;
					padding-bottom: 4px;
				}
				p{
					font-size: 14px;
					color: #444;
				}
			}
			li:nth-child(1){
				border-right: 1px solid #dedede;
			}
		}
	}
	//分类
	.sort{
		padding: 15px 10px;
		display: flex;
		align-items: center;
		li{
			width: 25%;
			text-align: center;
			img{
				display: inline;
				height: 0.36rem;
			}
		}
	}
	//公告
	.notice
	{
		margin-top: 15px;
		padding: 15px;
		background-color: #fff;
		.wrap{
			display: flex;
			align-items:center;
			.left{
				img{
					height: 25px;
					margin-right: 6px;
				}
			}
			.right{
				margin-left: 10px;
				padding-left: 10px;
				border-left: 3px solid #06AC52;
				height: 16px;
				line-height: 16px;
			}
		}
	}
	//屁股
	.footer{
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding: 10px 0;
		li{
			width: 50%;
			text-align: center;
			i{
				font-size: 20px;
				color: #999;
			}
			p{
				color: #999;
			}
		}
		.active{
			i{
				color: #333;
			}
			p{
				color: #333;
			}
		}
	}
</style>
